<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .hour,
    .minute,
    .second {
      width: 50px;
      height: 50px;
      display: inline-block;
      background-color: black;
      color: aliceblue;
      line-height: 30px;
      text-align: center;
    }
  </style>
</head>

<body>

  <div id="showtime"></div>

  <script>
    var showtime = function () {
      var nowtime = new Date(),  //获取当前时间
        endtime = new Date("2023/8/8");  //定义结束时间
      var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
        leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)),  //计算天数
        lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24),  //计算小时数
        leftm = Math.floor(lefttime / (1000 * 60) % 60),  //计算分钟数
        lefts = Math.floor(lefttime / 1000 % 60);  //计算秒数
      return leftd + "天" + lefth + ":" + leftm + ":" + lefts;  //返回倒计时的字符串
    }
    var div = document.getElementById("showtime");
    setInterval(function () {
      div.innerHTML = showtime();
    }, 1000);  //反复执行函数本身
  </script>
</body>

</html>